 |
 Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
|
|
Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
|
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizando Arquivos</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div id="container">
<h2>Selecionando arquivos - File API</h2>
<p>Pressione o botão e selecione os arquivos de imagens desejados:
<label for="arquivo">Selecionar arquivos</label>
<input hidden type="file" name="arquivo" id="arquivo" multiple onchange="exibir(this.files);">
</p>
<div>
<h4>Miniaturas</h4>
<span id="miniatura"></span>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
#container {
margin: 20px;
padding: 10px;
}
img {
padding: 10px;
border: 2px solid darkred;
margin: 10px;
}
label {
background-color: #3498db;
border-radius: 5px;
color: #fff;
cursor: pointer;
margin: 10px;
padding: 6px 20px;
}
/* Arquivo js.js */
let container = document.getElementById("miniatura");
function exibir(files) {
for (let i=0; i < files.length; i++) {
let f = files[i];
let leitor = new FileReader();
leitor.onload = function(e) {
let img = document.createElement("img");
img.src = e.target.result;
img.width = 100;
container.appendChild(img);
};
leitor.readAsDataURL(f);
}
}
Saída:
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Utilizando Arquivos</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div id="container">
<h2>Lendo arquivos Textos ou PDF- File API</h2>
<p>Pressione o botão e selecione os arquivos de imagens desejados:
<label for="arquivo">Selecionar arquivos</label>
<input hidden type="file" name="arquivo" id="arquivo" multiple onchange="exibir(this.files);">
</p>
<div>
<h4>Conteúdo</h4>
<textarea wrap="soft" cols="50" id="conteudo"></textarea>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
#container {
margin: 20px;
padding: 10px;
}
img {
padding: 10px;
border: 2px solid darkred;
margin: 10px;
}
label {
background-color: #3498db;
border-radius: 5px;
color: #fff;
cursor: pointer;
margin: 10px;
padding: 6px 20px;
}
textarea {
height: 500px;
}
/* Arquivo js.js */
let arquivosConteudo = document.getElementById("conteudo");
function exibir(files) {
console.log("Exibir arquivos");
for (let i = 0, f; f = files[i]; i++) {
let leitor = new FileReader();
// Adicionar o evento para a Leitura
addLeitura(leitor, f.name);
// Efetuando Leitura
leitor.readAsText(f);
}
}
function addLeitura(leitor, name) {
leitor.onload = function(e) {
arquivosConteudo.value += "*** Lendo arquivo " + name + " ***";
arquivosConteudo.value += e.target.result;
};
}
Saída:
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Utilizando Arquivos</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div id="container">
<h2>Lendo Informações (metadados) - File API</h2>
<p>Pressione o botão e selecione o arquivo para obter as informações desejadas:
<label for="arquivo">Selecionar arquivos</label>
<input hidden type="file" name="arquivo" id="arquivo" multiple onchange="informacoes();">
</p>
<div>
<h4>Informações do Arquivo</h4>
<div>
<ul>
<li>Nome: <span id="nome"></span></li>
<li>Tamanho: <span id="tamanho"></span></li>
<li>Tipo: <span id="tipo"></span></li>
<li>Data última modificação: <span id="datainfo"></span></li>
</ul>
</div>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
#container {
margin: 20px;
padding: 10px;
}
img {
padding: 10px;
border: 2px solid darkred;
margin: 10px;
}
label {
background-color: #3498db;
border-radius: 5px;
color: #fff;
cursor: pointer;
margin: 10px;
padding: 6px 20px;
}
h4, h2 {
color: #0D47A1;
}
/* Arquivo js.js */
function informacoes() {
let selecao = document.getElementById('arquivo').files[0];
document.querySelector("#nome").innerHTML = selecao.name;
document.querySelector("#tamanho").innerHTML = selecao.size + " bytes";
document.querySelector("#tipo").innerHTML = selecao.type;
document.querySelector("#datainfo").innerHTML = selecao.lastModifiedDate;
}
Saída:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Local Storage</title>
</head>
<body>
<h6> Veja o console log. </h6>
<script>
// Dados salvos
localStorage.ultimoNome = "Giancoli";
localStorage.primeiroNome = "Ana";
localStorage.cidade = "Bragança Paulista";
// Dados recuperados
let ultimoNome = localStorage.ultimoNome;
let primeiroNome = localStorage.primeiroNome;
let cidade = localStorage.cidade;
console.log("Informações recuperadas do Local Storage ");
console.log(primeiroNome);
console.log(ultimoNome);
console.log(cidade);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Form example</title>
<style>
fieldset {
padding: 10px;
border-radius: 10px;
}
h2 {
color: #0D47A1;
}
legend {
background-color: #3498db;
padding: 10px;
border-radius: 2em;
border: 2px solid #2e6da4;
}
label, button {
background-color: #3498db;
border-radius: 5px;
color: #fff;
cursor: pointer;
margin: 10px;
padding: 6px 20px;
display: inline-block;
width: 100px;
}
input {
float: right;
margin-right: 70px;
width: 200px;
}
input:invalid {
background-color: pink;
}
input:valid {
background-color: lightskyblue;
}
</style>
</head>
<body>
<h2>Entre com os valores e recarregue a qualquer hora.</h2>
<form action="" method="POST" autocomplete="off">
<fieldset>
<legend>Informações pessoais</legend>
<label for="primeiroNome">Primeiro nome:</label>
<input type="text" id="primeiroNome" required name="primeiroNome">
<br>
<label for="ultimoNome">Sobrenome:</label>
<input type="text" id="ultimoNome" required name="ultimoNome">
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" required name="email">
<br>
<label for="idade">Idade:</label>
<input type="number" min=0 max=120 step=5 id="age" required name="idade">
<br>
<label for="data">Aniversário:</label>
<input type="date" id="data" required name="data">
</fieldset>
<button>Enviar</button>
</form>
<script>
function enviarForm() {
console.log("Enviando.....");
return false;
}
/* Chamando a função para carregar automaticamente ao abrir a página */
window.onload = init;
function init() {
console.log("Adding input listener to all input fields");
// Evento aguardando inserção no formulário
let listaItens = document.querySelectorAll("input");
for(let i= 0; i < listaItens.length; i++) {
addItens(listaItens[i]);
}
// Recuperando valores salvos no Local Storage
restoreFormContent();
}
function addItens(entrada) {
entrada.oninput = function(event) {
localStorage.setItem(entrada.id, entrada.value);
};
}
function restoreFormContent() {
console.log("Recuperando dados do Local Storage...");
//Recuperando a lista de itens salvos
let listaItens = document.querySelectorAll("input");
for ( let i= 0; i < listaItens.length; i++) {
let campoRecup = listaItens[i];
let id = campoRecup.id;
let valorSalvo = localStorage.getItem(id);
if(valorSalvo !== undefined) {
campoRecup.value = valorSalvo;
}
}
}
</script>
</body>
</html>
Saída:
Guia passo a passo para se tornar um desenvolvedor frontend moderno: Desenvolvedor Frontend.
Especificação HTTP/2 RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2).
Guia
Guia 1
.
.
Guia 2
.
.
O Lighthouse "é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web. Ele pode ser executado como extensão do Chrome ou na linha de comando. Informe ao Lighthouse um URL que você quer auditar. Ele executará uma série de testes na página e gerará um relatório sobre o desempenho da página. Nesse relatório, você poderá usar os testes que apresentaram falha como indicadores do que pode ser feito para aprimorar o aplicativo". Lighthouse.
O PageSpeed informa o desempenho real de uma página para dispositivos móveis e computadores. Sobre o PageSpeed Insights.
"Em qualquer base de código usando BEM, desenvolvedores devem lembrar como seguir as regras do BEM a todo momento. Quando seguido a risca, BEM funciona muito bem. Mas, porque devemos deixar algo fundamental, como o escopo de nossos seletores, na responsabilidade de uma convenção de nomes? Se eles explicitamente dizem isso ou não. mas a maioria das bibliotecas CSS-in-JS estão seguindo a mentalidade BEM ao mapear estilos para elementos individuais da sua UI. Porém, elas são implementadas de uma maneira radicalmente diferente".
Artigo do Felipe Fialho - Do Sass e BEM ao CSS-in-JS: A (re)evolução do CSS ao longo da história.
Os Service Workers oferecem a base técnica para os seguintes recursos estarem disponíveis na web:
Os Service Workers possuem um ciclo de vida no qual consiste em:
ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.
